<template>
	<view class="select-box" :style="{ overflow: show ? '' : 'hidden' }" @click="handleClick">
		<view class="wrap" :style="{ width: selectWidth, overflow: show ? '' : 'hidden' }">
			<view class="select" @click="onSelectClick"
				:style="{
					backgroundImage: backImgType == 1
						? 'url(https://xd.xdzcy.top/adminuploads/ee2d73a83591894711bf6e97caba899a.png)'
						: 'url(https://xd.xdzcy.top/adminuploads/e20d053523b791056f5ce82714ffeb31.png)'
				}">
				<view class="select-value">{{ selected[optionName] ? selected[optionName] : '请选择' }}</view>
				<view class="arrow">
					<u-icon :name="show ? 'arrow-up' : 'arrow-down'" color="#000" bold></u-icon>
				</view>
			</view>

			<view class="select-options" :class="{ show }"
				:style="{
					backgroundImage: backImgType == 1
						? 'url(https://xd.xdzcy.top/adminuploads/dae51d3bd2f79c0c1a90ceefa75270e1.png)'
						: 'url(https://xd.xdzcy.top/adminuploads/b9d63965b854726eef2355bc3dffdcd5.png)'
				}">
				
				<!-- ✅ 搜索框 -->
				<view class="search-box">
					<input class="search-input" v-model="searchText" placeholder="搜索关键字" />
				</view>

				<!-- ✅ 滚动展示过滤后的选项 -->
				<scroll-view scroll-y class="option-scroll">
					<view
						class="option"
						v-for="item in filteredOptions"
						:key="item.id"
						:class="{ choose: item.value == selected.value }"
						@click="onSelect(item)"
					>
						{{ item[optionName] }}
					</view>
					<view v-if="filteredOptions.length === 0" class="option no-match">无匹配项</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			selectName: { type: String, required: true, default: '' },
			options: { type: Array, required: true, default: () => [] },
			optionName: { type: String, required: true, default: 'name' },
			label: { type: String, required: true, default: '选项' },
			selectWidth: { type: String, default: '262px' },
			backImgType: { type: Number, default: 1 },
		},
		data() {
			return {
				show: false,
				searchText: '',
				selected: {}
			}
		},
		computed: {
			filteredOptions() {
				if (!this.searchText) return this.options;
				return this.options.filter(item =>
					String(item[this.optionName]).toLowerCase().includes(this.searchText.toLowerCase())
				);
			}
		},
		methods: {
			onSelectClick() {
				this.show = !this.show;
				this.$emit('onSelectClick', { show: this.show });
			},
			onSelect(item) {
				this.selected = item;
				this.show = false;
				this.$emit('onSelect', {
					name: this.selectName,
					value: item,
				});
			},
			handleClick() {
				this.$emit('handleClick');
			}
		}
	};
</script>

<style lang="scss" scoped>
.select-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	color: #3D3D3D;

	.wrap {
		position: relative;

		.select {
			width: 100%;
			height: 88rpx;
			border-radius: 20rpx;
			background: #F6F6F6;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			z-index: 98;
			background-repeat: no-repeat;
			background-size: cover;

			.select-value {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex: 1;
				white-space: nowrap;
				font-size: 30rpx;
				margin-left: 40rpx;
				overflow-x: scroll;
			}

			.arrow {
				flex-shrink: 0;
				width: 92rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.select-options {
			position: absolute;
			right: 0;
			width: 100%;
			height: 0;
			border-radius: 20rpx;
			transition: all .3s;
			z-index: 99;
			background-repeat: no-repeat;
			background-size: cover;
			overflow: hidden;

			.search-box {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
			}

			.search-input {
				width: 100%;
				height: 64rpx;
				font-size: 28rpx;
				padding: 0 20rpx;
				border-radius: 12rpx;
				border: 1rpx solid #ccc;
				background-color: #fff;
			}

			.option-scroll {
				max-height: 260rpx;
				overflow-y: scroll;
			}

			.option {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				white-space: nowrap;
				font-size: 30rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				opacity: 0.5;
			}

			.choose {
				opacity: 1;
				font-weight: bold;
			}

			.no-match {
				color: #999;
				font-size: 28rpx;
			}
		}

		.show {
			transform: translateY(0);
			height: 360rpx;
		}
	}
}
</style>
